<template>
    <div class="lecturersdetial">
        <div class="lecturersdetial-head">
            <div class="Teachersdetails-info-left" v-for="(item,index) in HelpInfo" :key="index">
                <label style="margin-left:-95px">
                    <img :src="item.photo" alt="">
                </label>
                <label style="margin-left:-170px">
                    <span class="details_name">{{item.full_name}}</span>
                    <img src="/images/泡泡.png" class="Themessage" @click="Toviewmessage"/>
                    <el-rate v-model="item.score" disabled  text-color="#ff9900" score-template="{value}" style="margin-left:-40px;"></el-rate>
                    <span class="details_sex">{{item.sex == 1?'男':'女'}}  {{item.master_age}}</span>
                    <span class="details_teach_language">教学语言：{{item.teach_language}}</span>
                </label>
            </div>
            <div class="Teachersdetails-info-right" v-for="(item,index1) in HelpInfo" :key="index1">
                <!-- <label for="">
                    <img src="/images/telephone.png" alt="">
                    <span>{{item.mobile}}</span>
                </label>
                <label for="">
                    <img src="/images/local.png" alt="">
                    <span class="details_address">{{item.nhom_address}}</span>
                </label> -->
                <span class="details_guanzhu" @click="caozuoguanzhu">
                    {{isfollow?'取消关注':'关注'}}
                </span>
                <span class="details_guanzhu" @click="popupOpen(item)" style="top:143px;background-color:#fff;color:#333;">
                    约课
                </span>
            </div>
        </div>
        <div class="lecturersdetial-content">
            <div class="lecturersdetial-nav">
                <ul>
                    <li 
                    v-for="(navitem,navindex) in HelpNav" :key="navindex" @click="Tochose(navindex)" :class="HelpNavIndex == navindex?'navsed':''">
                        {{navitem}}
                    </li>
                </ul>
            </div>
            <div class="lecturersdetial-contents" v-if="HelpNavIndex == 0">
                <div class="lecturersdetial-contents-left" v-for="(iteminfo,infoindex) in HelpInfo" :key="infoindex">
                    <label>
                        <span>服务类型：</span>
                        <span>{{iteminfo.service_type == 1 ? '线上服务' : iteminfo.service_type == 2 ? '上门服务' : '线上服务/上门服务'}}</span>
                    </label>
                    <label v-if="iteminfo.serve_range">
                        <span>服务范围：</span>
                        <span>{{iteminfo.serve_range}}</span>
                    </label>
                    <label>
                        <span>服务人群：</span>
                        <span>{{iteminfo.serve_people}}</span>
                    </label>
                    <label>
                        <span>收费标准：</span>
                        <span>{{iteminfo.charging_standard}}元/课时</span>
                    </label>
                    <label>
                        <span>服务时长：</span>
                        <span>{{iteminfo.course_duration}}分钟/课时</span>
                    </label>
                    <label>
                        <span>语言等级：</span>
                        <span>{{iteminfo.language_level}}</span>
                    </label>
                    <label>
                        <span>学生数：</span>
                        <span>{{iteminfo.max_student_count}}</span>
                    </label>
                </div>
            </div>
            <!-- <div class="lecturersdetial-contentfs" v-else-if="HelpNavIndex ==1">
                <div>
                    <ul v-if="ThecurriculumList.length == 0" class="Thecurriculum">
                        <div  class="Summarylist-nodatads">
                            <label>
                                <img src="/images/圆角矩形 523@2x.png" alt="">
                                <span>暂无课程安排</span>
                            </label>
                        </div>
                    </ul>
                    <ul class="Thecurriculum" v-else>
                        <li v-for="(Thecurriculum,Thecurriculumindex) in ThecurriculumList" :key="Thecurriculumindex">
                            <label>
                                <span>{{Thecurriculum.create_time}}</span>
                                <span>{{Thecurriculum.start_time}}-{{Thecurriculum.end_time}}</span>
                            </label>
                            <label>
                                <span>点击预约</span>
                            </label>
                        </li>
                    </ul>
                </div>
                <div class="Lvie-cl-de-con-pagination" v-if="ThecurriculumList.length !== 0">
                    <el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next" :total="1000"></el-pagination>
                </div>
            </div> -->
            <div class="lecturersdetial-contentfs" v-else-if="HelpNavIndex ==1">
                <div class="Historytimetable-class-List">
                    <ul v-if="crossborderHlep.length == 0" class="Thecurriculum">
                        <div  class="Summarylist-nodatads">
                            <label>
                                <img src="/images/圆角矩形 523@2x.png" alt="">
                                <span>暂无已结束课程</span>
                            </label>
                        </div>
                    </ul>
                    <ul v-else>
                        <li v-for="(item,index2) in crossborderHlep" :key="index2" @click="todetile(item)">
                           <div class="Historytimetable-class-List-content">
                                <label>
                                    <img :src="item.map.userinfo.avatar" alt="" style="max-width: 80%;">
                                </label>
                                <label class="Historytimetable-class-Info">
                                    <label class="Personalschedule-class-info-head">
                                        <span style="font-weight: bold;font-size: 17px;">{{item.map.userinfo.nick_name}}</span>
                                    </label>
                                     <label>
                                        <span
                                        style="width:100px;height:30px;border-radius:15px;border:1px solid #FF9D3Dcolor: #FF9D3D;line-height: 20px;text-align: center;"
                                        >{{item.service_type == 'online' ?'线上服务':'上门服务'}}</span>
                                        <span>课时：{{item.student_count}}</span>
                                    </label>
                                    <label>
                                        <span>{{item.times}}</span> <span style="color:#fff">嘿</span>
                                        <span>{{item.starttime}}-{{item.endtime}}</span>
                                        <span>{{item.weekDay}}</span>
                                    </label>
                                </label>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="Lvie-cl-de-con-pagination" v-if="crossborderHlep.length !== 0">
                    <el-pagination @current-change="Gethistorys" background layout="prev, pager, next" :total="1000"></el-pagination>
                </div>
            </div>
            <div class="lecturersdetial-contentfs"  v-else-if="HelpNavIndex ==2">
                <ul v-if="Commits.length == 0" class="Thecurriculum">
                    <div  class="Summarylist-nodatads">
                        <label>
                            <img src="/images/圆角矩形 523@2x.png" alt="">
                            <span>暂无评论</span>
                        </label>
                    </div>
                </ul>
                <ul class="lecturersdetial-commit" v-else>
                    <li v-for="(comititem,comitindex) in Commits" :key="comitindex">
                        <h3>{{comititem.map.appointmentinfo.title}}</h3>
                        <label><span>{{comititem.create_time}}</span></label>
                        <div class="commit-cont">
                            <div class="comments-content">
                                <label>
                                    <label>
                                        <img :src="comititem.map.userinfo.avatar" alt="">
                                    </label>
                                    <label>
                                        <span>{{comititem.map.userinfo.nick_name}}</span>
                                        <span>{{comititem.content}}</span>
                                        <span>2小时前</span>
                                    </label>
                                </label>
                            </div>
                            <div class="reply-content" v-if="comititem.map.subComment.length!=0">
                                <label v-for="(respal,replayindex) in comititem.map.subComment" :key="replayindex">
                                    <label>
                                        <img :src="respal.map.userinfo.avatar" alt="">
                                    </label>
                                    <label class="reply-infos">
                                        <span>{{respal.map.userinfo.nick_name}}</span>
                                        <span style="color:#C2C2C2">回复</span>
                                        <span>{{respal.map.replyinfo.nick_name}}</span>
                                        <span>{{respal.content}}</span>
                                        <span class="toreplys" @click="ToRepalsy(notes)">回复</span>
                                        <span class="replaystimed">2小时前</span>
                                        <div class="replay" v-show="IsReplay">
                                            <input type="text" name="" id="">
                                            <span>回复</span>
                                        </div>
                                    </label>
                                </label>
                            </div> 
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <Yueke v-show="popup" :popup.sync ='popup' ref="mychild"></Yueke>
    </div>
</template>
<script>
import Yueke from '../../../../components/yueke'
export default {
    name:'sijiaoDetial',
    props:{
        routerData:String
    },
    data(){
        return{
            unserinfo:JSON.parse(localStorage.getItem('userinfo')),
            isfollow:false,
            HelpInfo:[],
            HelpNav:['基本信息','历史课程','评价'],
            HelpNavIndex:0,
            playerOptions:[],
            currentPage:1,
            ThecurriculumList:[],
            crossborderHlep:[],
            Commits:[],
            IsReplay:false,
            routerData:this.$route.query.routerData,
            popup:false,
            languageList:[{
                languageE:"Estonian",
                languageC:"爱沙尼亚语"
                },
            {
                languageE:"Arabic",
                languageC:"阿拉伯语"
                },
            {
                languageE:"Bulgarian",
                languageC:"保加利亚语"
                },
            {
                languageE:"polish",
                languageC:"波兰语"
                },
            {
                languageE:"Danish",
                languageC:"丹麦语"
                },
            {
                languageE:"German",
                languageC:"德语"
                },
            {
                languageE:"Russian",
                languageC:"俄语"
                },
            {
                languageE:"Traditional Chinese",
                languageC:"繁体中文"
                },
            {
                languageE:"French",
                languageC:"法语"
                },
            {
                languageE:"Finnish",
                languageC:"芬兰语"
                },
            {
                languageE:"Korean",
                languageC:"韩语"
                },
            {
                languageE:"Dutch",
                languageC:"荷兰语"
                },
            {
                languageE:"Czech",
                languageC:"捷克语"
                },
            {
                languageE:"romanian",
                languageC:"罗马尼亚语"
                },
            {
                languageE:"Portuguese",
                languageC:"葡萄牙语"
                },
            {
                languageE:"Japanese",
                languageC:"日语"
                },
            {
                languageE:"Swedish",
                languageC:"瑞典语"
                },
            {
                languageE:"slovenian",
                languageC:"斯洛文尼亚语"
                },
            {
                languageE:"Thai",
                languageC:"泰语"
                },
            {
                languageE:"Spanish",
                languageC:"西班牙语"
                },
            {
                languageE:"Greek",
                languageC:"希腊语"
                },
            {
                languageE:"hun",
                languageC:"匈牙利语"
                },
            {
                languageE:"Italian",
                languageC:"意大利语"
                },
            {
                languageE:"English",
                languageC:"英语"
                },
            {
                languageE:"Vietnamese",
                languageC:"越南语"
                },
            {
                languageE:"cantonese",
                languageC:"粤语"
                },
            {
                languageE:"Chinese",
                languageC:"中文"
            }],
            Languagelevel: [{
                label: "零基础",
                id: 1,
                value: "Zero basis"
            },{
                label: "初级",
                id: 2,
                value: "Senior"
            },{
                label: "中级",
                id: 3,
                value: "Intermediate"
            },{
                label: "高级",
                id: 4,
                value: "Primary"
            }],
            peopleList:[
            {
                label: "幼儿",
                id: 1,
                value: "Childhood"
            },{
                label: "青少年",
                id: 2,
                value: "Teenagers"
            },{
                label: "大学生",
                id: 3,
                value: "University Student"
            },{
                label: "成人",
                id: 4,
                value: "Adult"
            }],
        }
    },
    created:function(){
        this.GetHelpInfo()
        var myDate = new Date();
    },
    mounted(){
        this.panduanfollow()
    },
    components: {//组件注册
        Yueke
    },
    methods:{
        popupOpen(item){
            let _this = this
            _this.popup = true
            this.$refs.mychild.getYuekeInfo(_this.HelpInfo[0].user_id)
        },
        caozuoguanzhu(){
            let _this = this,url
            let data = {
                master_id:_this.routerData,
                type:'private',
                user_id:_this.unserinfo.user_id,
            }
            if(_this.isfollow){
                url = 'deleteFollow'
                _this.$axios({
                    method:'get',
                    url:'https://www.curiousmore.com/qmore/user/masterFollow/deleteFollow',
                    params:data,
                }).then((res) =>{
                    console.log(res.data.data)
                    if(res.data.code == 0){
                        _this.isfollow = false
                        _this.$message('操作成功')
                    }else{
                        _this.$message('操作失败')
                    }
                }).catch((error) =>{
                    console.log(error)
                })
            }else{
                _this.$axios({
                    method:'post',
                    url:'https://www.curiousmore.com/qmore/user/masterFollow/insert',
                    data:data,
                }).then((res) =>{
                    console.log(res.data.data)
                    if(res.data.code == 0){
                        _this.isfollow = true
                        _this.$message('操作成功')
                    }else{
                        _this.$message('操作失败')
                    }
                }).catch((error) =>{
                    console.log(error)
                })

            }
            
        },
        panduanfollow(){
            let _this = this
            let data = {
                master_id:_this.routerData,
                type:'private',
                user_id:_this.unserinfo.user_id,
            }
            _this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user/masterFollow/queryIsFollow',
                params:data,
            }).then((res) =>{
                _this.isfollow = res.data.data.is_follow
            }).catch((error) =>{
                console.log(error)
            })
        },
        Toviewmessage(){//查看消息
            this.$router.push({path:'/views/Learningcenter/Mynews'})
        },
        GetHelpInfo(){
            var _this = this
            var data ={
                user_id	:this.$route.query.routerData == undefined ? _this.routerData : this.$route.query.routerData,
                type:'private_education',
                // status:2
            }
            this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user/masterInfo/queryTeachingCenter',
                params:data,
            }).then((res) =>{
                console.log(res.data.data)
                _this.HelpInfo = []
                _this.HelpInfo.push(res.data.data[0])
                _this.HelpInfo.map(item=>{
                    item.teach_language = item.teach_language.split(",")
                    item.teach_language.map((itam,index)=>{
                        _this.languageList.map(itcm=>{
                            if(itam == itcm.languageE){
                                item.teach_language[index] = itcm.languageC
                            }
                        })
                    })
                    item.teach_language = item.teach_language.join(',')
                    item.language_level = item.language_level.split("/")
                    item.language_level.map((itam,index)=>{
                        _this.Languagelevel.map(itcm=>{
                            if(itam == itcm.value){
                                item.language_level[index] = itcm.label
                            }
                        })
                    })
                    item.language_level = item.language_level.join(',')
                    item.serve_people = item.serve_people.split("/")
                    item.serve_people.map((itam,index)=>{
                        _this.peopleList.map(itcm=>{
                            if(itam == itcm.value){
                                item.serve_people[index] = itcm.label
                            }
                        })
                    })
                    item.serve_people = item.serve_people.join(',')
                })
                console.log(_this.HelpInfo,'==i')
            }).catch((error) =>{
                console.log(error)
            })
        },
        todetile(item){
            console.log(item)
            // this.$router.push({path:'/views/Teachingcenters/Teachingcentercoursedetails',query: {id: item.map.masterAppointmentEntity.id,Isend:true}})
        },
        Tochose(e){
            this.HelpNavIndex = e
            // if(this.HelpNavIndex == 1){
            //     this.GetThecurriculum()
            // }else 
            if(this.HelpNavIndex == 1){
                this.GetHistoryteacher()
            }
            else if(this.HelpNavIndex == 2){
                this.GetCommits()
            }
        },
        GetThecurriculum(){//获取课程表
            let _this = this
            var data = {
                master_id:_this.routerData,
                user_id:_this.unserinfo.user_id,
                pageSize:12,
                master_type:'private_education',
                currentPage:_this.currentPage

            }
            _this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user/userAppointment/queryUserSchedule',
                params:data,
            }).then((res) =>{
                console.log(res.data.data,'99i9i9')
                // _this.ThecurriculumList =res.data.data
                // _this.ThecurriculumList.forEach(e => {
                //     var stars = e.start_time
                //     var entimes = e.end_time
                //     var times = stars.substring(5, stars.indexOf(' '))//截取当前日期
                //     var starttime =  stars.substring(11, 16)//截取开始时间
                //     var endtime =  entimes.substring(11, 16)//截取结束时间
                //     e['create_time'] = times
                //     e['start_time'] = starttime
                //     e['end_time'] = endtime
                // });
                // _this.ThecurriculumList=[
                //     {
                //         create_time:'01:01:01',
                //         start_time:'02:02:02',
                //         end_time:'03:03:03',
                //     }
                // ]
            }).catch((error) =>{
                console.log(error)
            })
        },
        handleCurrentChange(val){
            this.currentPage =val
            this.GetThecurriculum()
        },
        Gethistorys(vale){
            this.currentPage  =vale
            this.GetHistoryteacher()
        },
        GetHistoryteacher(){//历史课程
            let _this = this
            // var data ={
            //     page :_this.currentPage ,
            //     pageSize:3,
            //     type:"single_class",
            //     master_id:_this.routerData
            // }
            var data ={
                currentPage :_this.currentPage ,
                pageSize:3,
                master_id:_this.routerData,
                master_type:'private_education',
            }
            console.log(data,'历史课程上传的参数')
            _this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user/userAppointment/queryHistoryListPage',
                params:data,
                }).then((res) =>{
                    console.log(res.data.data,'助学师历史课程')
                    _this.crossborderHlep = res.data.data
                    _this.crossborderHlep.forEach(e=>{
                        var stars = e.start_time
                        var entimes = e.end_time
                        console.log(stars,'wiw')
                        var year = stars.substring(0,4), month = stars.substring(5,7)-1, date = stars.substring(8,10);// month=8表示9月,因为月份要加1
                        var dt = new Date(year, month, date);     
                        var weekDay = ["周天", "周一", "周二", "周三", "周四", "周五", "周六"];
                        e.weekDay = weekDay[dt.getDay()]
                        var times = stars.substring(0, stars.indexOf(' '))//截取当前日期
                        var starttime =  stars.substring(11, 16)//截取开始时间
                        var endtime =  entimes.substring(11, 16)//截取结束时间
                        var myDate = new Date(Date.parse(times));  
                        e.times = times
                        e.starttime = starttime
                        e.endtime = endtime
                    })
                }).catch((error) =>{
                    console.log(error)
            })
        },
        GetCommits(){
            let _this = this
            console.log(this.$route.query.routerData)
            var data ={
                currentPage :_this.currentPage,
                pageSize:7,
                parent_id:0,
                master_id:this.$route.query.routerData,
                // user_id:_this.unserinfo.user_id,
                // master_type:'private_education',
                // appointment_id:_this.HelpInfo[0].id,
            }
            console.log(data,'获取评论上传参数')
            _this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user/masterComment/queryListPage',
                params:data,
                }).then((res) =>{
                    _this.Commits =res.data.data
                    console.log(_this.Commits.length == 0,'助学师评论')
                }).catch((error) =>{
                    console.log(error)
            })
        },
        ToRepalsy(){//回复评论接口
            let _this = this
            _this.IsReplay =!_this.IsReplay
        }

    }
}
</script>
<style lang="less" scoped>
    .details_guanzhu{
        width: 100px;
        height: 36px;
        color: #fff;
        line-height: 36px;
        background-color: #FF4E00;
        text-align: center;
        border-radius: 18px;
        position: absolute;
        right: 55px;
        top: 96px;
        cursor: pointer;
    }
    .lecturersdetial{
        position: relative;
        width: 90%;
        height: auto;
        margin: 0 auto;
    }
    .lecturersdetial-head{
        position: relative;
        width: 100%;
        margin: 0 auto;
        height: 190px;
        background:#2B3753;
        border-radius:15px;
        margin-top: 40px;
        display: flex;
        align-items: center;
        div{
            width: 50%;
            height: 100%;
        }
    }
    .Teachersdetails-info-left{
        width: 50%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        label{
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            align-items: center;
            justify-content: center;
            .Themessage{
                position: absolute;
                cursor: pointer;
                top: 41px;
                right: 87px;
                width: 35px;
                height: 35px;
                border-radius: 0px;
            }
            img{
                width: 103px;
                height: 103px;
                border-radius: 50px;
            }
            span{
                width: 100%;
                height: 40px;
                line-height: 40px;
                padding-left: 20%!important;
                color: #cccccc;
            }
        }
    }
   
    .Teachersdetails-info-right{
        width: 50%;
        height: 70%!important;
        display: flex;
        flex-wrap: wrap;
        label{
            width: 100%;
            height: 30px;
            span{
                display: inline-block;
                height: 30px;
                line-height: 30px;
                color: #ccc;
                padding-left: 2%;
            }
            img{
                vertical-align: middle;
                width: 22px;
                height: 22px;
            }
        }
    }
    .lecturersdetial-nav{
        position: relative;
        width: 100%;
        height: 60px;
        border-bottom: 1px solid #e3e3e3;
        margin-top: 60px;
    }
    .lecturersdetial-nav>ul{
        list-style: none;
        display: flex;
        width: 100%;
        height: 60px;
        align-items: center;
        padding: 0;
        li{
            width: 10%;
            cursor: pointer;
            color: #A5A5A5;
            font-size: 16px;
        }
    }
    .navsed{
        color: #313131!important;
        font-weight: bold;
    }
    .lecturersdetial-contents{
        position: relative;
        width: 100%;
        margin: 0 auto;
        display: flex;
    }
    .lecturersdetial-contentfs{
        position: relative;
        width: 100%;
        margin: 0 auto;
    }
    
    .lecturersdetial-contents-left,.lecturersdetial-contents-right{
        width: 50%;
        margin-top: 18px;
        h3{
            font-size: 14px;
        }
    }
    .lecturersdetial-contents-left>label{
        display: flex;
        width: 100%;
        height: 40px;
        span{
            font-size: 14px;
            &:first-child{
                width: 30%;
                color: #3E3E3E;
            }
            &:last-child{
                color: #B7B7B7;
            }
        }
    }
    .lecturersdetial-contents-right>ul{
        list-style: none;
        display: flex;
        width: 100%;
        padding: 0;
        flex-wrap: wrap;
        li{
            width: 48%;
        }
    }
    .Thecurriculum{
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        list-style: none;
        padding: 0;
        li{
            width: 22%;
            height: 42px;
            border:2px solid rgba(71,206,207,1);
            border-radius:21px;
            margin-top: 20px;
            margin-left: 2%;
            display: flex;
            align-items: center;
            &:nth-child(4n+1){
                margin-left: 0;
            }
        }

    }
    .Thecurriculum>li>label{
        font-size: 12px;
        &:first-child{
            width: 60%;
            text-align: center;
            span{
                display: inline-block;
                width: 50%;
                color: #555555;
            }
        }
        &:last-child{
            width: 40%;
            text-align: center;
            span{
                cursor: pointer;
                color: #29C5C6;
            }
        }
    }
    .Lvie-cl-de-con-pagination{
        position: relative;
        width: 100%;
        height: 100px;
        margin-top: 100px;
        margin-bottom: 40px;
        display: flex;
        justify-content: flex-end;
        margin-right: 100px;
    }
    .Historytimetable-class-List{
        position: relative;
        width: 100%;
        padding-bottom: 40px;
        ul{
            display: flex;
            width: 100%;
            list-style: none;
            padding: 0;
            flex-wrap: wrap;
            justify-content: space-between;
            li{
                width: 48%;
                height: 133px;
                border:1px solid rgba(54,205,206,1);
                border-radius:5px;
                margin-top: 20px;
                cursor: pointer;
            }
        }
    }
    .Historytimetable-class-List-content{
        position: relative;
        width: 90%;
        margin: 0 auto;
        display: flex;
        height: 100%;
        align-items: center;
    }
    .Historytimetable-class-List-content>label:first-child{
        width: 31%;
        border-radius: 15px;
        height: 80%;
        overflow: hidden;
        img{
            width: auto;
            height: auto;
            max-width: 100%;
        }
    }
    .Historytimetable-class-Info{
        width: 50%;
        height: 90%; 
        padding-left: 6%;
        label{
            display: flex;
            // justify-content: space-between;
            font-size: 14px;
            height:auto;
            line-height: 24px;
            margin-top: 8px;
            span{
                display: inline-block;
                width: auto;
                &:first-child{
                    width: auto;
                }
                &:last-child{
                    margin-left: 4%;
                }
            }
        }
    }
    .Historytimetable-class-Info>.Historytimetable-class-Infos{
        margin-top: 10px;
        
    }
    .PersonaltrainingLis-cover{
        width: 12px;
        height: 14px;
        margin-top: 2%;
    }

    .lecturersdetial-commit{
        display: flex;
        width: 100%;
        list-style: none;
        flex-wrap: wrap;
        padding: 0;
        li{
            width: 100%;
        }
    }




    //评论
    .comments-content{
        position: relative;
        width: 86%;
        margin:  0 auto;
    }
    .comments-content>label{
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        margin-top: 30px;
        img{
            width: 34px;
            height: 34px;
            border-radius: 20px;
        }
    }
    .comments-content>label>label,.reply-content>label>label{
        display: flex;
        width: 78%;
        height: 60px;
        align-items: center;
        font-size: 12px;
        &:first-child{
            width: auto;
        }
        &:last-child{
            width: 80%;
            display: flex;
            flex-wrap: wrap;
            span{
                display: inline-block;
                width: 60%;
                height: 20px;
                line-height: 20px;
                margin-left: 2%;
                &:first-child{
                    width: auto;
                }
                &:last-child{
                    color: #C2C2C2;
                }
            }
        }
    }
    .reply-content{
        position: relative;
        width: 76%;
        margin:  0 auto;
    }
    .reply-content>label{
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        min-height: 100px;
        align-items: center;
        background:rgba(246,246,246,1);
        border-radius: 10px;
        img{
            width: 34px;
            height: 34px;
            border-radius: 20px;
            margin-left: 20px;
        }
    }
    .reply-infos{
        width: 80%;
        display: flex;
        flex-wrap: wrap;
        
        align-items: center;
        span{
            width: auto!important;
        }
    }
    .replaystimed{
        width: 80%!important;
        color: #C2C2C2;
    }
    .load-more{
        position: relative;
        width: 100%;
        height: 40px;
        margin-top: 40px;
        text-align: center;
        cursor: pointer;
        line-height: 40px;
        color: #30C4C4;
        font-size: 14px;
    }
    .toreplys{
        margin-left: auto!important ;
        cursor: pointer;
    }
    .toreplys:hover{
        color: red;
    }
    .thereplaysinput{
        position: relative;
        width: 100%;
        /deep/.el-input{
            width: 60%;
            margin-top: 10px;
            margin-left: 2%;
        }
        
    }
    .thereplaysinput>span{
        display: inline-block;
        width: 16%!important;
        height: 40px!important;
        text-align: center!important;
        line-height: 40px!important;
        background: #44c7c7!important;
        border-radius: 10px!important;
        margin-left: 2%!important;
        color: #FFFFFF!important;
        font-size: 12px!important;
        cursor: pointer;
    }
    .replay{
        position: relative;
        width: 100%;
        height: 20px!important;
        input{
            width: 60%;
            height: 20px!important;  
        }
        span{
            display: inline-block;
            width: 10%!important;
            height: 40px!important;
            background: red;

        }
    }
    .Summarylist-nodatads{
        position: relative;
        top: 28px;
        width: 100%!important;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        label{
            width: 100%;
            text-align: center;
        }
        img{
            width: 39px!important;
            height: 39px!important;
        }
        span{
            display: inline-block;
            width: 100%;
            text-align: center;
            margin-top: 10px;
            color: #e7e7e7;
        }
    }
</style>